<template>
  <div class="view-full setting">
    <ul class="menus">
      <router-link tag="li" v-for="(item, key) in list" :key="key" :to="item.path">
        <span>{{item.name}}</span>
        <i class="icon iconfont icon-jiantouyou"></i>
      </router-link>
    </ul>
    <div class="btns">
		  <!-- <x-button type="primary" @click.native="switchShow = true" v-if="qieShow">切换为{{switchTitle}}</x-button> -->
		  <x-button type="primary" @click.native="logoutShow = true">退出登录</x-button>
    </div>
    <div v-transfer-dom>
      <confirm v-model="logoutShow" @on-confirm="logoutSure">
        <p class="tips">您确定要退出登录吗？</p>
      </confirm>
    </div>
    <div v-transfer-dom>
      <confirm v-model="switchShow" @on-confirm="switchSure">
        <p class="tips">您确定要切换角色吗？</p>
      </confirm>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "账号安全",
          path: "/safety"
        },
        {
          name: "意见反馈",
          path: "/opinion"
        },
        // {
        //   name: "操作指南",
        //   path: ""
        // }
      ],
      logoutShow: false,
      switchShow: false,
      qieShow: window.localStorage.getItem('mId') | this.$store.state.isMaster
    };
  },
  computed: {
    switchTitle() {
      return this.$store.state.isMaster ? '用户' : '大师';
    },
  },
  methods: {
    logoutSure(){
      this.$store.commit("logout");
      this.$router.push({
        path: "/index"
      });
    },
    switchSure() {
      let storage = window.localStorage;
      if(storage.getItem('masterId')) {
        storage.setItem('mId', storage.getItem('masterId'))
        storage.removeItem('masterId')
      } else {
        storage.setItem('masterId', storage.getItem('mId'))
        storage.removeItem('mId')
      }
      
      this.$store.commit("switchover", {
        masterId: storage.getItem('masterId')
      });
      this.$router.back();
    },
  },
};
</script>

<style lang="less" scoped>
.setting {
  .menus {
    li {
      .pl(20);
      .pr(20);
      .mb(10);
      .h(90);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff;
      span {
        .f28;
        color: #020202;
      }
      .icon {
        .f24;
        color: #999999;
      }
    }
  }
  .btns {
    .p(20);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
.vux-confirm{
  .tips{
    .f28;
  }
}
</style>
